<template>
<view class="home-main tab-view">
	<status-navigator-wrap>
		<view class="header">
			<image src="@/static/images/a.jpg"></image>
			<text>爪爪健康 宠物健康顾问</text>
		</view>
	</status-navigator-wrap>
	
	<view class="summarize">
		<view class="item">
			<view class="check">
				<image src="@/static/images/icon/check.png" mode="widthFix"></image>
			</view>
			<text class="label">临床专业执业兽医</text>
		</view>
		<view class="item">
			<view class="check">
				<image src="@/static/images/icon/check.png" mode="widthFix"></image>
			</view>
			<text class="label">7*24小时快速响应</text>
		</view>
		<view class="item">
			<view class="check">
				<image src="@/static/images/icon/check.png" mode="widthFix"	></image>
			</view>
			<text class="label">行业领先知识库</text>
		</view>
	</view>
	
	<view class="search-wrap" @click="$router.to('search')">
		<image src="@/static/images/icon/search.png"></image>
		<view>日常 / 问题 / 症状 / 药品</view>
	</view>
	
	<view class="lead-wrap">
		<view class="top-container">
			<view class="left" @click="$router.to('consult')">
				<view class="title">快速咨询</view>
				<view class="label">专业解答，免费问诊</view>
				<view class="bg">
					<image class="chat-bubble" src="@/static/images/bg/chat-bubble.png"></image>
					<image class="question" src="@/static/images/bg/question.png"></image>
				</view>
			</view>
			<view class="right">
				<view class="item" @click="$router.to('new_pet_raiser')">
					<view class="title">新手养宠</view>
					<view class="label">洗护、感冒、驱虫等知识</view>
				</view>
				<view class="item" @click="$router.to('health_center')">
					<view class="title">健康卡片</view>
					<view class="label">爱宠健康指标记录</view>
				</view>
			</view>
		</view>
		<image class="bottom-image" src="@/static/images/bg/knowledge.png"></image>
	</view>
	
	<view class="knowledge-star">
		<view class="title">知识星球</view>
		<view class="container">
			<view class="bg"></view>
			<view class="star-item" v-for="(item, index) in starContainer.list"
			 :style="item.style">
				<view class="name">{{ item.label }}</view>
				<view class="spot" :style="item.spotStyle"></view>
			</view>
		</view>
	</view>
	
	<view class="health-adviser">
		<view class="title">健康顾问</view>
		<view class="list">
			<view class="item" v-for="i in 3"
			@click="$router.to('person_info')">
				<view class="top">
					<image class="head-picture" src="@/static/images/a.jpg"></image>
					<view class="center">
						<view class="name-job">
							<view>王广</view>
							<view>执业兽医师</view>
						</view>
						<view class="intro">
							瑞鹏宠物医院15年<text>一线临床医师</text>
						</view>
					</view>
					<view class="button btn" @click="$router.toPageCousult()">咨询</view>
				</view>
				<view class="bottom">
					擅长猫狗的内科、外科、心脑血管科，对猫狗的常见系统疾病能够快速鉴别，并给出治疗方案
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
import statusNavigatorWrap from '@/components/status-navigator-wrap.vue'
export default {
	data() {
		return {
			starContainer: {
				// 星星数组
				list: [],
				// 颜色数组
				locationList: [	
					{x: 5, y: 5 }, {x: 94, y: 60 }, {x: 92, y: 166 },
					{x: 190, y: 104 }, {x: 166, y: 1 }, {x: 260, y: -60 },
					{x: 4, y: -99 }, {x: 84, y: -193 }, {x: 24, y: -270 },
					{x: 194, y: -226 }, {x: 86, y: -62 }, {x: 174, y: -101 },
					{x: -162, y: 184 }, {x:-46, y: 110 }, {x: -182, y: 80 },
					{x: -245, y: -21 }, {x: -153, y: -5 }, {x: -83, y: -51 },
					{x: -230, y: -129 }, {x: -160, y: -225 }, {x: -82, y: -144 },
					{x: -46, y: -227 }, {x: -48, y: 231 }
				],
				colorList: [
					"#FEA869", "#26F4E4", "#FF7ED4",
					"#FF5252", "#74F981", "#8359FF",
					"#CC4CFF", "#71D7FF"
				],
			}
		}
	},
	created () {
		this.initStarContainer()
	},
	computed: {
		
	},
	methods: {
		// 初始化星状图
		initStarContainer () {
			let { list, colorList, locationList } = this.starContainer
			for (let i = 0; i < locationList.length; i++) {
				let label = "感冒"
				if (i < 4) {
					switch (i) {
						case 0: label = "禽流感"; break;
						case 1: label = "冰冷"; break;
						case 2: label = "绝育"; break;
						case 3: label = "吸猫"; break;
					}
				}
				let color = colorList[this.$util.getRandomInt(0, colorList.length - 1)]
				
				let isDouble = Math.random() > 0.8
				let translateX = locationList[i].x + ((Math.random() > 0.5 ? 1 : -1) * this.$util.getRandomInt(0, 6))
				let translateY = locationList[i].y + ((Math.random() > 0.5 ? 1 : -1) * this.$util.getRandomInt(0, 6))
				let item = {
					label,
					style: {
						transform: `translate(${translateX}rpx, ${translateY}rpx)`,
						opacity: 1,
						color: Math.random() > 0.9 ? color : "#3D3D3D",
						fontSize: `${isDouble ? 26 : 13}rpx`
					},
					spotStyle: {
						width: `${isDouble ? 28 : 14}rpx`,
						height: `${isDouble ? 28 : 14}rpx`,
						background: Math.random() > 0.8 ? color : `radial-gradient(50% 50% at 50% 50%, ${color} 0%, rgba(255, 126, 212, 0) 100%)`,
						animationDuration: (this.$util.getRandomInt(4, 12) + Math.random()) + "s"
					}
				}
				list.push(item)
			}
		}
	},
	components: {
		statusNavigatorWrap
	}
}
</script>

<style lang="less">
.home-main {
	padding: 0 40rpx 60rpx;
	
	.header {
		display: flex;
		align-items: center;
		
		>image {
			width: 74rpx;
			height: 74rpx;
			border-radius: 100%;
		}
		
		>text {
			color: #3D3D3D;
			font-size: 24rpx;
			margin-left: 20rpx;
		}
	}
	
	.summarize {
		display: flex;
		align-items: center;
		margin-top: 32rpx;
		
		.item {
			display: flex;
			align-items: center;
			flex-shrink: 0;
			
			&:nth-child(n+2) {
				margin-left: 18rpx;
			}
			
			.check {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FF4E0C;
				width: 20rpx;
				height: 20rpx;
				border-radius: 100%;
				
				>image {
					flex-shrink: 0;
					width: 14rpx;
				}
			}
			
			.label {
				font-size: 24rpx;
				color: #9B9B9B;
				margin-left: 8rpx;
			}
		}
	}
	
	.search-wrap {
		display: flex;
		align-items: center;
		width: 100%;
		height: 82rpx;
		padding: 0 26rpx;
		border: 1rpx solid #E2E2E2;
		border-radius: 10rpx;
		box-shadow: 0px 4rpx 15rpx 0px rgba(187, 187, 187, 0.3);
		margin-top: 24rpx;
		
		>image {
			width: 25rpx;
			height: 25rpx;
		}
		
		>view {
			font-size: 24rpx;
			line-height: 1;
			color: #C5C5C5;
			margin-left: 10rpx;
		}
	}
	
	.lead-wrap {
		.top-container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 10px;
			height: 286rpx;
			margin-top: 24rpx;
			
			.left {
				position: relative;
				display: flex;
				flex-direction: column;
				width: 365rpx;
				height: 100%;
				padding: 40rpx 24rpx;
				border-radius: 10rpx;
				background: linear-gradient(180deg, #FFC3C2 4%, #FEEAE9 100%);
				overflow: hidden;
			
				.title {
					font-size: 36rpx;
					color: #3D3D3D;
				}
				
				.label {	
					font-size: 18rpx;
					color: #3D3D3D;
					margin-top: 12rpx;
				}
				
				.bg {
					position: absolute;
					right: 0;
					bottom: 0;
					width: 100%;
					height: 100%;
					
					.chat-bubble {
						position: absolute;
						width: 270rpx;
						height: 180rpx;
						bottom: -10rpx;
						right: -10rpx;
					}
					
					.question {
						position: absolute;
						top: 80rpx;
						right: 12rpx;
						width: 40rpx;
						height: 50rpx;
					}
				}
			}
		
			.right {
				display: flex;
				flex-direction: column;
				height: 100%;
				justify-content: space-between;
				
				.item {
					width: 285rpx;
					height: 133rpx;
					border-radius: 10rpx;
					padding: 40rpx 24rpx;
					
					&:nth-child(1) {
						background: linear-gradient(180deg, #B1DEFF 0%, #D4ECFF 100%);
					}
					
					&:nth-child(2) {
						background: linear-gradient(180deg, #FFE182 4%, #FFF0CD 99%);
					}
					
					.title {
						font-size: 24rpx;
						font-weight: bold;
						color: #3D3D3D;
					}
					
					.label {
						font-size: 18rpx;
						color: #6F6F6F;
						margin-top: 4rpx;
					}
				}
			}
		}
		
		.bottom-image {
			width: 100%;
			height: 167rpx;
			border-radius: 10rpx;
			margin-top: 22rpx;
		}
	}
	
	.knowledge-star, .health-adviser {
		.title {
			font-size: 34rpx;
			color: #112950;
		}
	}
	
	.knowledge-star {
		margin-top: 24rpx;
		
		.container {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			overflow: visible;
			margin-top: 24rpx;
			height: 560rpx;
			
			.bg {
				width: 477rpx;
				height: 477rpx;
				background: radial-gradient(50% 50% at 50% 50%, rgba(255, 122, 15, 0.12) 1%, rgba(252, 228, 179, 0) 100%);
			}
			
			.star-item {
				position: absolute;
				display: flex;
				align-items: center;
				flex-direction: column;
				transform-origin: center;
				
				.spot {
					margin-top: 2rpx;
					border-radius: 100%;
					animation: shine infinite 5s;
				}
				
				@keyframes shine {
					0% { opacity: 1; }
					50% { opacity: 0.4; }
					100% { opacity: 1; }
				}
			}
		}
	}
	
	.health-adviser {
		.list {
			margin-top: 24rpx;
			
			.item {
				&:nth-child(n+2) {
					margin-top: 24rpx;
				}
				
				.top {
					display: flex;
					align-items: center;
					height: 96rpx;
					
					.head-picture {
						align-self: flex-start;
						width: 74rpx;
						height: 74rpx;
						border-radius: 100%;
					}
					
					.center {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						
						flex: 1;
						margin: 0 20rpx;
						height: 100%;
						
						.name-job {
							display: flex;
							align-items: center;
							
							>view {
								&:nth-child(1) {
									font-size: 32rpx;
									font-weight: bold;
									color: #3D3D3D;
								}
								
								&:nth-child(2) {
									margin-left: 20rpx;
									font-size: 24rpx;
									color: #3D3D3D;
								}
							}
						}
						
						.intro {
							font-size: 24rpx;
							color: #000000;
							
							>text {
								color: #FF6D03;
							}
						}
					}
					
					.button {
						display: flex;
						align-items: center;
						justify-content: center;
						line-height: 1;
						width: 88rpx;
						height: 63rpx;
						border-radius: 10rpx;
						background: #FF6D03;
						color: #FFFFFF;
						font-size: 24rpx;
					}
				}
				
				.bottom {
					margin-top: 15rpx;
					font-size: 24rpx;
					color: #6A6A6A;
					padding-left: 95rpx;
				}
			}
		}
	}
}
</style>
